<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TripByTrain</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>

        body {
            margin: 0;
            padding: 0;
            background-image: url('image/background.jpg'); /* 替换为你的图片路径 */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            min-height: 100vh;
        }

        #mainHeader{
            background-color: rgba(179, 192, 209, 0.8);
            color: #333;
            text-align: center;
            line-height: 70px;
        }

        el-main {
            position: relative; /* 父容器设为相对定位 */
            min-height: 100vh;
        }

        .loginForm {
            position: absolute;
            top: 55%;
            left: 75%;
            transform: translate(-50%, -50%);
            width: 300px;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div id="app">

    <el-container>
        <el-header id="mainHeader" height="160px">
            <p style="text-align: center; font-size: 48px;
            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
             -webkit-background-clip: text; color: transparent;">
                Trip by Train,a more convenient way to travel!</p>
        </el-header>

        <el-main>
            <div class="loginForm" v-show="loginVisible">
                <el-header style="text-align: center;">您好，请登录</el-header>
            <el-form ref="loginForm" :model="loginForm" label-width="80px">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="loginForm.username" ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginForm.password" ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loginIn">登录</el-button>

                    <el-link type="primary" underline style="margin-left: 30px;">忘记密码</el-link>
                    <br>


                    <el-link type="primary" @click="showRegister" underline >还没有账号？点击注册</el-link>
                </el-form-item>
            </el-form>

            </div>

            <div class="loginForm" v-show="registerVisible">
                <el-header style="text-align: center;">注册账号</el-header>
                <el-form ref="registerForm" :rules="rules" :model="registerForm" label-width="80px">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="registerForm.username" ></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="registerForm.password" ></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPassword">
                        <el-input type="password"  v-model="registerForm.checkPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="手机" prop="phone">
                        <el-input v-model="registerForm.phone" ></el-input>
                    </el-form-item>
                    <el-form-item label="证件类型" prop="idType">
                        <el-select v-model="registerForm.idType" placeholder="请选择证件类型" prop="idType">
                            <el-option label="身份证" value="0"></el-option>
                            <el-option label="护照" value="1"></el-option>
                            <el-option label="港澳台通行证" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="证件号码" prop="idCard">
                        <el-input v-model="registerForm.idCard" ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('registerForm')">注册</el-button>
                        <br>
                        <el-link type="primary" @click="showLogin" underline >已有账号？点击登录</el-link>
                    </el-form-item>
                </el-form>

            </div>
        </el-main>

    </el-container>

</div>
</body>
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.registerForm.checkPassword !== '') {
                        this.$refs.registerForm.validateField('checkPass');
                    }
                    callback();
                }
            };

            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.registerForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                loginVisible : true,
                registerVisible : false,
                loginForm:{
                    username: 'username',
                    password: 'password'
                },
                registerForm:{
                    username: 'username',
                    password: 'password',
                    checkPassword: 'password',
                    phone:'13888888888',
                    realName:'真实姓名',
                    idType:'',
                    idCard:'310114199901018080'
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 5, max: 14, message: '长度在 5 到 14 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPassword: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { min:11, max:11 ,message: '手机号格式错误', trigger: 'blur' }
                    ],
                    realName: [
                        {required: true, message: '请输入真实姓名', trigger: 'blur' }
                    ],
                    idType: [
                        { required: true, message: '请选择证件', trigger: 'change' }
                    ],
                    idCard: [
                        { required: true, message: '请输入证件号', trigger: 'blur' },
                        { min:9 , max: 18, message: '证件号格式错误', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.register();
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            showRegister(){
                this.loginVisible = false;
                this.registerVisible = true;

            },
            showLogin(){
                this.loginVisible = true;
                this.registerVisible = false;
            },
            loginIn(){
                if(this.loginForm.username === ''||this.loginForm.password === ''){
                    this.$message({
                        showClose: true,
                        message: '请输入账号和密码！',
                        type: 'error'
                    });
                 return;
                }
                var _this=this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/user/login",
                    data:_this.loginForm
                }).then(function (resp) {
                    if(resp.data.code === 1){
                        _this.$message({
                            showClose: true,
                            message: '登录成功！',
                            type: 'success'
                        });
                        localStorage.setItem('userInfo',JSON.stringify(resp.data.data));
                        _this.loginVisible=false;
                        window.location.href="index.html";
                    }else {
                        _this.$message({
                            showClose: true,
                            message: '账号或密码错误！',
                            type: 'error'
                        });
                    }

                })
                this.cleanModel();
            },
            register(){
                var _this=this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/user/register",
                    data:_this.registerForm
                }).then(function (resp) {
                    if(resp.data.code === 1){
                        _this.$message({
                            showClose: true,
                            message: '注册成功！',
                            type: 'success'
                        });
                        _this.loginVisible=true;
                        _this.registerVisible=false;
                    }
                    else if(resp.data.code === 0){
                        _this.$message.error({
                            showClose: true,
                            message: resp.data.msg,
                        });
                    }
                })
                this.cleanModel();
            }


        }
    });
</script>

</html>